<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		box {
			display: inline-block;
			width: 400px;
			height: 600px;
			overflow: auto;
			margin: 4px;
			padding: 12px;
			border: 1px solid #000;
		}

		li {
			padding: 6px 0;
			cursor: pointer;
		}
		li.current {
			color: #fff;
			background: #0e8c8c;
		}
	</style>

	<script type="text/javascript">
		cola(function(model) {
			model.dataType({
				name: "Company",
				properties: {
					depts: {
						provider: "//open-data.cola-ui.com/service/company/{{@id}}/depts"
					}
				}
			});

			model.describe("companies", {
				dataType: "Company",
				provider: "//open-data.cola-ui.com/service/company"
			});

			model.action({
				setCurrent: function(company) {
					model.get("companies").setCurrent(company);
//					model.set("currentCompany", company);
				}
			});
		});
	</script>
</head>
<body style="padding:1em;">
<box>
	<li c-repeat="company in companies">
		<span c-bind="$index"></span>
		<span c-bind="company.name" c-href="company.url" c-onclick="setCurrent(company)"></span>
	</li>
</box>
<box>
	<li c-repeat="dept in companies.depts">
		<span c-bind="$index"></span>
		<span c-bind="dept.name"></span>
	</li>
</box>
</body>
</html>